<template>
  <div class="textColorAnimation">
    <div class="container">
      <span ref="content" class="txt anim-text-flow" v-html="html"></span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      html: '',
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      // const dom = document.querySelector('.anim-text-flow');
      const text = 'Sass 是一款强化 CSS 的辅助工具，具有多种高级功能，令 CSS 更加强大与优雅。';
      const chars = text.split('');
      this.html = `<span >${chars.join('</span><span>')}</span>`;
    },
  },
};
</script>

<style lang="scss">
/*
   * Animation variables
   */
$animationSteps: 20;
$animationDuration: 30;
$animationElement: span;
$animationElementsCount: 100;
$delayBetweenLetters: 0.2;

$totalDelayTime: $animationElementsCount * $delayBetweenLetters;

/*
   * Keyframe loop
   */
@keyframes anim-text-flow-keys {
  @for $i from 0 through $animationSteps {
    #{percentage($i * (1 / $animationSteps))} {
      color: hsla(random(365), 60, 60, 1);
    }
  }
}

////////////////////////////
// DEMO CODE
///////////////////////////
.textColorAnimation {
  background-color: #1a1a1a;
  color: #fefefe;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 1.3em;
  line-height: 2;
  font-weight: 300;
  text-rendering: optimizeLegibility;
  text-align: center;
  .container {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%);
  }

  .txt {
    display: block;
  }

  .anim-text-flow,
  .anim-text-flow-hover:hover {
    /*
   * Elements settings
   */
    #{$animationElement} {
      animation-name: anim-text-flow-keys;
      animation-duration: #{$animationDuration}s;
      animation-iteration-count: infinite;
      animation-direction: alternate;
      animation-fill-mode: forwards;
    }

    /*
   * Element animation delay loop
   */

    @for $i from 1 through $animationElementsCount {
      #{$animationElement}:nth-of-type(#{$i}) {
        animation-delay: #{($i * $delayBetweenLetters) - $totalDelayTime}s;
      }
    }
  }
}
</style>
